<template>
  <div class="log">
    <h4>消息盒子</h4>
    <el-collapse v-model="act" accordion>

        <el-collapse-item v-if="total>0" v-for="(item,i) in msg" :key="i" :title="`[系统消息] ${item.create_time}`" :name="i">
          <div class="msg" v-html="item.content"></div>
        </el-collapse-item>
      <el-collapse-item v-else name="0" title="暂无消息">
        消息盒子是空的
      </el-collapse-item>

    </el-collapse>
    <div class="page" v-if="total > limit">
      <el-pagination
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {reactive, toRefs} from "@vue/reactivity";
import {ref} from "vue";
import {onMounted} from "vue";
import {getMessage} from "../../api/user";

export default {
  name: "Message",
  setup(){
    const state = reactive({
      msg:[],
      total:0,
      page:1,
      limit:15,
      act:ref("0")
    })
    const methods = {
      async getMessage(page){
        let params = {
          limit : state.limit,
          page: page
        }
        let resp = await getMessage(params)
        state.msg = resp.data.data
        state.total = resp.data.count
      },
      handleCurrentChange(val){
        state.page = val;
        methods.getExpense(val)
      }
    }
    onMounted(()=>{
      methods.getMessage(1)
    })
    return {
      ...toRefs(state),
      ...methods
    }
  }
}
</script>

<style scoped>

</style>